import React, { useRef, useEffect } from 'react'
import * as echarts from 'echarts';

function Where() {
    const ref = useRef()

    useEffect(() => {
        var chartDom = ref.current;
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            color: ['#E60C87', '#03C4DB', '#E2B21C'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                show: false
            },
            grid: {
                top: '2%',
                left: '3%',
                right: '5%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLine: {
                    show: true
                },
                // 取消X轴线，
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                data: ['湖北', '江苏', '浙江', '广西', '广东', '重庆', '天津', '上海'],
                axisLine: {
                    show: true
                },
                // 去掉刻度线
                axisTick: {
                    show: false
                }
            },
            series: [
                {
                    name: '2022',
                    type: 'bar',
                    data: [4500, 3500, 2500, 3500, 6000, 4000, 3000, 3500],
                    barWidth: 5,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [10, 10, 10, 10]
                        }
                    }
                },
                {
                    name: '2021',
                    type: 'bar',
                    data: [3500, 2500, 2000, 2600, 4500, 3000, 2500, 2800],
                    barWidth: 5,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [10, 10, 10, 10]
                        },
                    }
                },
                {
                    name: '2020',
                    type: 'bar',
                    data: [4000, 3000, 2500, 3000, 5800, 4000, 3000, 3500],
                    barWidth: 5,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [10, 10, 10, 10]
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);

    }, [])
    return (
        <div className="where-2" ref={ref}></div>
    )
}

export default Where
